<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <style>
        .menus {
            width: 200px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px solid black;
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<h1 id="txt">坚持有用吗</h1>
<div class="menus" boder="1">
    <div class="item">
        <div class="header" onclick="clickMe(this);">syf</div>
        <div class="content hide">
            <a>甜妹</a>
            <a>糖果</a>
            <a>抽象</a>
            <a>冻脚</a>
        </div>

        <div class="item">
            <div class="header" onclick="clickMe(this);">syf2</div>
            <div class="content hide">
                <a>甜妹</a>
                <a>糖果</a>
                <a>抽象</a>
                <a>冻脚</a>
            </div>
        </div>

        <div class="item">
            <div class="header" onclick="clickMe(this);">yzl</div>
            <div class=" content hide">
                <a>glutton</a>
                <a>lunatic</a>
                <a>capybara</a>
                <a>perish</a>
            </div>
        </div>

        <div class="item">
            <div class="header" onclick="clickMe(this);">yzl2</div>
            <div class=" content hide">
                <a>glutton</a>
                <a>lunatic</a>
                <a>capybara</a>
                <a>perish</a>
            </div>
        </div>

    </div>

</div>
<input type="text" id="user" placeholder="用户名">
<input type="password" id="email" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()">
<ul id="view">

</ul>


<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>syf</td>
        <td>
            <input type="button" value="删除" class="delete"/>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>syf</td>
        <td>
            <input type="button" value="删除"class="delete"/>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>syf</td>
        <td>
            <input type="button" value="删除"class="delete"/>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>syf</td>
        <td>
            <input type="button" value="删除"class="delete"/>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>syf</td>
        <td>
            <input type="button" value="删除"class="delete"/>
        </td>
    </tr>
    <tr>
        <td>1</td>
        <td>syf</td>
        <td>
            <input type="button" value="删除"class="delete"/>
        </td>
    </tr>
    </tbody>
</table>
<script src="../../static/app_02/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
    // 当页面的框架加载完成之后，自动就执行，
    $(function () {
        // 利用jQuery中的功能实现某些效果

        // 1.找到id=txt的标签 + 内容修改
        $("#txt").text("老子草拟码");

        function clickMe(self) {
            // $(self)->表示当前点击的那个标签
            // $(self).next()下一个标签
            // $(self).next().removeclass("hide")  删除样式
            var hasHide = $(self).next().hasClass("hide");
            if (hasHide) {
                $(self).next().removeClass("hide")
            } else {
                $(self).next().addClass("hide")
            }
        }

        function getInfo() {
            // 1.获取用户输入的用户名和密码
            var user = $("#user").val();
            var email = $("#email").val();
            var dataString = user + "-" + email;
            // 2.创建Li标签，在li的内部写入内容。$("<Li>")
            var newLi = $("<li>").text(dataString);
            newLi.click(function () {
                // 点击li标签时，自动执行这个函数
                // $(this) 当前你点击的那个标签
                // var text = $(this).text()

                $(this).remove()      // 删除
            });
            // 3.把新创建的li标签添加到uL里面
            $("#view").append(newLi);
        }

        $(".delete").click(function (){
            $(this).parent().parent().remove()
        })
    })


</script>


</body>
</html>